import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Select, Input } from 'antd';
import React, { useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import styles from './style.less'
import { getUserServiceCity } from '../service'

const LuggageAddOrEditForm = props => {
  const { luggageAddOrEditVisible, modalTitle, luggageId, luggageData, form, onCancel, onSubmit: handleLuggage } = props;

  const { data: getUserServiceCityD = {} } = useRequest(getUserServiceCity)

  // 表单格式
  const layout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };

  // 确认
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleLuggage(fieldsValue)
    });
  };

  useEffect(() => {
    if (luggageId !== '') {
      form.setFieldsValue({
        pkgNo: luggageData.pkgNo,
        pkgName: luggageData.pkgName,
        pkgSize: luggageData.pkgSize,
        pkgPrice: luggageData.pkgPrice,
        pkgCount: luggageData.pkgCount
      })
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <>
      <Modal
        className={styles.luggageAddOrEditForm}
        title={[
          <div key="title">{modalTitle}</div>
        ]}
        visible={luggageAddOrEditVisible}
        onOk={okHandle}
        onCancel={() => onCancel()}
      >
        <Form.Item
          {...layout}
          label="服务航站"
        >
          {form.getFieldDecorator('serviceCity', {
            rules: [
              {
                required: true,
                message: '请选择服务航站'
              }
            ],
            initialValue: getUserServiceCityD.serviceCity
          })(<Select disabled={modalTitle === '新增箱包' && luggageId !== ''}>
            <Select.Option value={getUserServiceCityD.serviceCity}>CTU-双流国际机场</Select.Option>
          </Select>)}
        </Form.Item>
        <Form.Item
          {...layout}
          label="箱包编号"
        >
          {form.getFieldDecorator('pkgNo')(<Input placeholder='请输入' disabled={modalTitle === '新增箱包' && luggageId !== ''} />)}
        </Form.Item>
        <Form.Item
          {...layout}
          label="箱包名称"
        >
          {form.getFieldDecorator('pkgName', {
            rules: [
              {
                required: true,
                message: '请输入箱包名称'
              }
            ]
          })(<Input placeholder='请输入' disabled={modalTitle === '新增箱包' && luggageId !== ''} />)}
        </Form.Item>
        <Form.Item
          {...layout}
          label="箱包尺寸"
        >
          {form.getFieldDecorator('pkgSize', {
            rules: [
              {
                required: true,
                message: '请输入箱包尺寸'
              }
            ]
          })(<Input placeholder='请输入' disabled={modalTitle === '新增箱包' && luggageId !== ''} />)}
        </Form.Item>
        <Form.Item
          {...layout}
          label="箱包单价"
        >
          {form.getFieldDecorator('pkgPrice', {
            rules: [
              {
                validator: async (rule, value, callback) => {
                  if (!value) {
                    callback("请输入箱包单价")
                  } else {
                    if (value[0] === '0') {
                      callback("请输入正确的箱包单价")
                    }
                  }
                  callback();
                },
              }
            ],
            getValueFromEvent: (event) => {
              return event.target.value.replace(/[^0-9]/g, '')
            }
          })(<Input placeholder='请输入' disabled={modalTitle === '新增箱包' && luggageId !== ''} maxLength={6}/>)}
        </Form.Item>
        <Form.Item
          {...layout}
          label="采购箱包数量"
        >
          {form.getFieldDecorator('pkgCount', {
            rules: [
              {
                validator: async (rule, value, callback) => {
                  if (!value) {
                    callback("请输入采购箱包数量")
                  } else {
                    if (value[0] === '0') {
                      callback("请输入正确的采购箱包数量")
                    }
                  }
                  callback();
                },
              }
            ],
            getValueFromEvent: (event) => {
              return event.target.value.replace(/[^0-9]/g, '')
            }
          })(<Input placeholder='请输入' maxLength={6}/>)}
        </Form.Item>
      </Modal>
    </>
  );
};

export default Form.create()(LuggageAddOrEditForm);
